<template>
	<a-row :gutter="10">
		<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
			<a-card :bordered="false" style="margin-bottom: 10px">
				<a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
					<a-row :gutter="24">
						<a-col :span="6">
							<a-form-item name="tableId" label="所属表格">
								<a-tree-select
									v-model:value="searchFormState.tableId"
									style="width: 100%"
									:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
									placeholder="请选择所属表格"
									allow-clear
									tree-default-expand-all
									:tree-data="treeData"
									:field-names="{
										children: 'children',
										label: 'name',
										value: 'tableId'
									}"
									selectable="false"
									tree-line
									@select="treeSelect"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item name="fieldName" label="字段名称">
								<a-input v-model:value="searchFormState.fieldName" placeholder="请输入字段名称" />
							</a-form-item>
						</a-col>
						<a-col :span="8">
							<a-button type="primary" @click="tableRef.refresh(true)">
								<template #icon><SearchOutlined /></template>
								查询
							</a-button>
							<a-button class="leisure-buttom-left" @click="reset">
								<template #icon><redo-outlined /></template>
								重置
							</a-button>
							<!-- <a-button class="leisure-buttom-left" type="primary" @click="openModel()">
								<template #icon><plus-outlined /></template>
								新增
							</a-button> -->
						</a-col>
					</a-row>
				</a-form>
			</a-card>
			<a-card :bordered="false">
				<s-table
					ref="tableRef"
					:columns="columns"
					:data="loadData"
					:expand-row-by-click="true"
					bordered
					:tool-config="toolConfig"
					:row-key="(record) => record.id"
				>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'sync'">
							<a-switch :loading="loadingSync" :checked="record.sync === 'Y'" @change="onSync(record)" />
						</template>
						<template v-if="column.dataIndex === 'showPc'">
							<a-switch :loading="loadingShowPc" :checked="record.showPc === 'Y'" @change="setShowPc(record)" />
						</template>
						<template v-if="column.dataIndex === 'showH5'">
							<a-switch :loading="loadingShowH5" :checked="record.showH5 === 'Y'" @change="setShowH5(record)" />
						</template>

						<template v-if="column.dataIndex === 'custom'">
							<span v-if="record.custom === 'N'">否</span>
							<span v-else-if="record.custom === 'Y'">是</span>
						</template>
						<template v-if="column.dataIndex === 'action'">
							<a @click="openSortModal(record)">排序</a>
							<a-divider v-if="record.custom === 'Y'" type="vertical" />
							<a-popconfirm v-if="record.custom === 'Y'" title="删除此字段？" @confirm="deleteFile(record)">
								<a-button type="link" danger size="small">删除</a-button>
							</a-popconfirm>
						</template>
					</template>
				</s-table>
			</a-card>
		</a-col>
	</a-row>
	<a-modal v-model:visible="visibleSortModal" title="设置排序" @ok="handleSortModalOk">
		<a-form ref="sortFormRef" :model="sortFormData" :rules="sortFormRules" :label-col="labelCol">
			<a-form-item label="字段排序：" name="sort">
				<a-input-number style="width: 100%" v-model:value="sortFormData.sort" :max="100" />
			</a-form-item>
		</a-form>
	</a-modal>
	<a-modal v-model:visible="visible" title="dsadsa" @ok="handleOk">
		<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="labelCol">
			<a-form-item label="字段编码：" name="fieldId">
				<a-input v-model:value="formData.fieldId" placeholder="请输入字段编码" allow-clear />
			</a-form-item>
			<a-form-item label="字段名称：" name="name">
				<a-input v-model:value="formData.name" placeholder="请输入字段名称" allow-clear />
			</a-form-item>
			<a-form-item label="字段别名：" name="alias">
				<a-input v-model:value="formData.alias" placeholder="请输入字段别名" allow-clear />
			</a-form-item>
			<a-form-item label="字段类型：" name="fieldType">
				<a-input v-model:value="formData.fieldType" placeholder="请输入字段类型" allow-clear />
			</a-form-item>
			<a-form-item label="字段排序：" name="sort">
				<a-input-number style="width: 100%" v-model:value="formData.sort" :max="100" />
			</a-form-item>
			<a-form-item label="字段描述：" name="description">
				<a-input v-model:value="formData.description" placeholder="请输入字段描述" allow-clear />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script setup name="tableField">
import { onMounted } from 'vue'
import { Empty } from 'ant-design-vue'
import { isEmpty } from 'lodash-es'
import { required } from '@/utils/formRules'
import TableFieldForm from './TableFieldForm.vue'
import TableApi from '@/api/info/TableApi'
import TableFieldApi from '@/api/info/TableFieldApi'
// 表单固定label实现
const labelCol = ref({
	style: {
		width: '100px'
	}
})

const toolConfig = { refresh: true, height: true, columnSetting: true }
const emit = defineEmits({ goBack: null })
// 默认是关闭状态
const visible = ref(false)
const formRef = ref()
const searchFormState = ref({})
const searchFormRef = ref()
const tableRef = ref()

const sortFormRef = ref()
const sortFormData = ref({})
// 表单数据
const title = ref('')
// 默认展开的节点
const defaultExpandedKeys = ref([])
const checkedKeys = ref([])
const treeData = ref([])
// 替换treeNode 中 title,key,children
const treeFieldNames = { children: 'children', title: 'name', key: 'tableId' }
const cardLoading = ref(true)

const formData = ref({})
// 默认要校验的
const sortFormRules = {
	sort: [required('请输入排序')]
}
// 默认要校验的
const formRules = {
	name: [required('请输入职位名称')],
	sort: [required('请选择排序')]
}
const visibleSortModal = ref(false)
const loadingSync = ref(false)
const loadingShowPc = ref(false)
const loadingShowH5 = ref(false)
const tableSearchFormState = ref({})

const tableSearchFormRef = ref()
const columns = [
	{
		title: '字段名称',
		dataIndex: 'fieldName',
		width: 180
	},
	{
		title: '别名',
		dataIndex: 'alias',
		width: 180
	},
	{
		title: '字段id',
		dataIndex: 'fieldId',
		width: 160
	},
	{
		title: '字段类型',
		dataIndex: 'fieldType',
		width: 160
	},
	{
		title: '数据类型',
		dataIndex: 'dataType',
		width: 160
	},
	{
		title: '自定义',
		dataIndex: 'custom',
		width: 180
	},
	{
		title: '同步数据',
		dataIndex: 'sync',
		width: 180
	},
	{
		title: 'pc展示',
		dataIndex: 'showPc',
		width: 180
	},
	{
		title: 'H5展示',
		dataIndex: 'showH5',
		width: 180
	},
	{
		title: '排序',
		dataIndex: 'sort',
		width: 100
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'left',
		width: 260
	}
]
// 加载左侧的树
const loadTreeData = () => {
	tableSearchFormState.value.hide = 'Y'
	TableApi.list(tableSearchFormState.value).then((res) => {
		cardLoading.value = false
		if (res !== null && res.length > 0) {
			treeData.value = res
			defaultExpandedKeys.value = [res[0].tableId]
			checkedKeys.value = [res[0].tableId]
		} else {
			treeData.value = []
		}
	})
}
// 点击树查询
const treeSelect = (selectedKeys) => {
	console.log(selectedKeys)
	if (selectedKeys && selectedKeys.length > 0) {
		searchFormState.value.tableId = selectedKeys.toString()
	} else {
		delete searchFormState.value.tableId
	}
	tableRef.value.refresh(true)
}
// 获取站内信列表
const loadData = (parameter) => {
	// loadTreeData()
	if (!searchFormState.value.tableId) {
		return
	}
	if (!parameter) {
		parameter = {}
	}

	return TableFieldApi.page(Object.assign(parameter, searchFormState.value)).then((data) => {
		return data
	})
}
// 开启同步
const onSync = (record, sync) => {
	loadingSync.value = true
	const params = {
		id: record.id
	}
	if (record.sync === 'Y') {
		params.sync = 'N'
	} else {
		params.sync = 'Y'
	}
	TableFieldApi.setSync(params)
		.then(() => {
			tableRef.value.refresh(true)
		})
		.finally(() => {
			loadingSync.value = false
		})
}
// 修改状态
const setShowPc = (record) => {
	loadingShowPc.value = true
	const param = {}
	param.id = record.id
	param.revision = record.revision
	if (record.showPc === 'Y') {
		param.showPc = 'N'
	} else {
		param.showPc = 'Y'
	}
	TableFieldApi.setShowPc(param)
		.then(() => {
			tableRef.value.refresh()
		})
		.finally(() => {
			loadingShowPc.value = false
		})
}
// 修改状态
const setShowH5 = (record) => {
	loadingShowH5.value = true
	const param = {}
	param.id = record.id
	param.revision = record.revision
	if (record.showH5 === 'Y') {
		param.showH5 = 'N'
	} else {
		param.showH5 = 'Y'
	}
	TableFieldApi.setShowH5(param)
		.then(() => {
			tableRef.value.refresh()
		})
		.finally(() => {
			loadingShowH5.value = false
		})
}
const openSortModal = (record) => {
	sortFormData.value.id = record.id
	sortFormData.value.sort = record.sort
	sortFormData.value.revision = record.revision
	visibleSortModal.value = true
}

const handleSortModalOk = () => {
	sortFormRef.value.validate().then(() => {
		TableFieldApi.setSort(sortFormData.value)
			.then(() => {
				visibleSortModal.value = false
				sortFormData.value = {}
				tableRef.value.refresh()
			})
			.finally(() => {
				visibleSortModal.value = false
			})
	})
}
const openModel = () => {
	visible.value = true
}
const handleOk = () => {
	visible.value = false
}
// 重置
const reset = () => {
	searchFormRef.value.resetFields()
	tableRef.value.refresh(true)
}

onMounted(() => {
	loadTreeData()
})
</script>

